<!DOCTYPE html>
<!--注册-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">
</head>

<body class="text-center">
<form class="form-signin" th:action="@{/register}">
    <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
    <div>
    <h1 class="h3 mb-3 font-weight-normal" >信息填写</h1>
    <label class="sr-only" >用户名</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required="" autofocus="" onblur="a1()">
    <span id="userInfo"></span>
    </div>
    <label class="sr-only" >输入密码</label>
    <input type="password" class="form-control" id="password1" name="password1" placeholder="密码" required="">
    <label class="sr-only" >再次输入密码</label>
    <input type="password" class="form-control" id="password2" name="password2" placeholder="密码" required="" autofocus="" onblur="a2()">
    <span id="userInfo2"></span>
    <label class="sr-only" >email地址</label>
    <input type="text" class="form-control" id="email" name="email" placeholder="邮箱" required="" onblur="a4()">
<!--    <button type="button" class="btn btn-default btn-sm" th:href="">获取验证码</button>-->
    <label class="sr-only" ></label>
    <input type="text" id="userkey" class="form-control" name="userkey" placeholder="验证码" required="" onblur="a5()">
    <div class="col">
        <button type="button" class="btn btn-default btn-sm" onclick="a3()">获取验证码</button>
        <button id="create" type="submit" class="btn btn-primary" >提交</button>
    </div><span id="userInfo3"></span>

<!--    <div class="checkbox mb-3">-->
<!--        <label>-->
<!--            <button th:href="">获取验证码</button>-->
<!--        </label>-->
<!--    </div>-->
<!--    <button class="btn btn-lg btn-primary btn-block" type="submit">注册提交</button>-->
</form>
<script th:src="@{/js/jquery.min.js}" src="/js/jquery.min.js"></script>
    <script>
        function a1() {
            $.ajax({
                url: "checkname",
                data: {"name":$("#username").val()},
                success: function (data) {
                    if (data.toString() == 'ok'){
                        $('#userInfo').css("color","green");
                    }else {
                        $('#userInfo').css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
            
        }

        var p1 = document.querySelector('#password1');
        var p2 = document.querySelector('#password2');
        var p3 = document.querySelector('#email');
        var p4 = document.querySelector('#userkey');


        // console.log(p1, p2, click);

        function a2() {
            // console.log(666);
            console.log(p1.value);
            console.log(p2.value);
            if (p1.value === null){
                $('#userInfo2').css("color","red");
                $("#userInfo2").html("密码不可为空");
            }else if (p2.value === null) {
                $('#userInfo2').css("color","red");
                $("#userInfo2").html("密码不可为空");
            }else if (p1.value === p2.value){
                //可以发送请求
                $('#userInfo2').css("color","green");
                $("#userInfo2").html("ok");
            } else{
                //给用户提示，两次输入的密码不一致，请重新输入
                $('#userInfo2').css("color","red");
                $("#userInfo2").html("两次密码不一致");
            }

        }

        function a3() {
            $('#userInfo3').css("color","green");
            $("#userInfo3").html("已发送");
            $.ajax({
                url: "check",
                data:{"email":$("#email").val()}
            })
        }

    </script>
</body>

</html>